<template>
  <el-table
    :data="tableData"
    style="width: 93%;"
    :stripe="true"
    size="medium "
    :show-header="false"
    border
    :row-style="rowStyle"
    >
  <el-table-column prop="date" >
  </el-table-column>
  <el-table-column prop="name">
  </el-table-column>
    </el-table>
</template>
<script>
export default {
  props: {
    ramTable: {
      type: Object,
      require: true
    }
  },
  watch: {
    ramTable (val) {
      console.log(val)
    }
  },
  data () {
    return {
      dataForm: {
        sysTypeName: '',
        total: '',
        free: '',
        used: '',
        usage: ''
      }
    }
  },
  computed: {
    // 因为数据用到了dataform中的数据，所以写在了computed中
    tableData () {
      if (!this.ramTable || !this.ramTable.sysFiles) {
        return
      }
      return [
        {
          date: '磁盘类型',
          name: this.ramTable.sysFiles[1].sysTypeName
        },
        {
          date: '磁盘总容量',
          name: this.ramTable.sysFiles[1].total
        },
        {
          date: '磁盘空闲容量',
          name: this.ramTable.sysFiles[1].free
        },
        {
          date: '磁盘已使用容量',
          name: this.ramTable.sysFiles[1].used
        },
        {
          date: '磁盘资源的使用率',
          name: this.ramTable.sysFiles[1].usage + '%'
        }
      ]
    }
  },
  methods: {
    // 自定义列背景色
    rowStyle ({
      row,
      rowIndex
    }) {
      if (rowIndex === 0) {
        return 'background:#f3f6fc;'
      } else {
        return 'background:#ffffff;'
      }
    }
  }
}
</script>
